<template>
  <div class="box">
    <div class="el-card_body">
      <el-form
        ref="carModelsForm"
        :model="carModelsForm"
        :rules="carModelsRules"
        label-width="80px"
      >
        <el-row type="flex" justify="start">
          <el-col :span="8">
            <el-form-item label="车型编号:">
              <el-input
                v-model="carModelsForm.id"
                placeholder="请输入车型编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载重量">
              <el-input
                v-model="carModelsForm.allowableLoad"
                placeholder="请输入应载重量"
              /> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="应载体积">
              <el-input
                v-model="carModelsForm.allowableVolume"
                placeholder="请输入应载体积"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆类型">
              <el-input
                v-model="carModelsForm.name"
                placeholder="请输入车辆类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="btnbox">
              <el-button
                type="primary"
                size="medium"
                @click="getCarModelsList"
                style="height: 40px"
                >搜索</el-button
              >
              <el-button size="medium" @click="resetSearch">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="el-card_body2">
      <el-button type="primary" size="medium" @click="showDialog = true"
        >新增车型</el-button
      >

      <!-- 数据table -->

      <template>
        <el-table
          :header-cell-style="{ background: '#f8faff', color: '#818693' }"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="id" label="车型编号" width="220" />
          <el-table-column prop="name" label="车辆类型" width="160" />

          <el-table-column prop="num" label="车辆数量" width="142">
            <template v-slot="{ row }">
              <span>
                {{ row.num ? row.num : "0" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="应载重量(吨)"
            width="214"
          />
          <el-table-column
            prop="allowableVolume"
            label="应载体积(立方米)"
            width="214"
          />
          <el-table-column prop="measureLong" label="长(米)" width="142" />
          <el-table-column prop="measureWidth" label="宽(米)" width="142" />
          <el-table-column prop="measureHigh" label="高(米)" width="142" />
          <el-table-column label="操作" width="142" fixed="right">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="medium"
                :style="{ color: '#409EFF' }"
                @click="
                  {
                    editTruckType(row), (showDialog = true);
                  }
                "
                >编辑</el-button
              >
              <el-button type="text" size="medium" @click="delTruckType(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <template>
          <el-row :gutter="10" type="flex" justify="center">
            <el-col style="padding: 20px 0" :span="7">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="carModelsForm.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="carModelsForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination
            ></el-col>
          </el-row>
        </template>
      </template>
    </div>
    <!-- 新增车型弹窗 -->
    <el-dialog
      :visible="showDialog"
      title="新增车型"
      @close="btnCancel"
      width="30%"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        label-width="130px"
      >
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="车辆类型" required prop="name">
              <el-input
                v-model="addForm.name"
                placeholder="请输入车辆类型"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="应载重量" required prop="allowableLoad">
              <el-input
                v-model="addForm.allowableLoad"
                placeholder="请输入应载重量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="应载体积" required prop="allowableVolume">
              <el-input
                v-model="addForm.allowableVolume"
                placeholder="请输入应载体积"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="长" prop="measureLong">
              <el-input
                v-model="addForm.measureLong"
                placeholder="0.0"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="宽" prop="measureWidth">
              <el-input
                v-model="addForm.measureWidth"
                placeholder="0.0"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="高" prop="measureHigh">
              <el-input
                v-model="addForm.measureHigh"
                placeholder="0.0"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <el-button
              type="primary"
              size="medium"
              @click="btnOk"
              style="height: 40px"
              >确定</el-button
            >
            <el-button size="medium" @click="btnCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCarModelsList,
  addTruckType,
  delTruckType,
  editTruckType,
} from "@/api/car-models";
export default {
  name: "CarModels",
  data() {
    return {
      carModelsForm: {
        id: null,
        allowableLoad: null,
        allowableVolume: null,
        name: null,
        page: 1,
        pageSize: 10,
      },
      resetSearchForm: {
        id: null,
        allowableLoad: null,
        allowableVolume: null,
        name: null,
        page: 1,
        pageSize: 10,
      },
      carModelsRules: {},
      tableData: [],
      total: 0,

      // 新增车型弹窗
      showDialog: false,
      addForm: {
        id: null,
        allowableLoad: null,
        allowableVolume: null,
        name: "",
        num: 1,
        goodsTypes: [],
        measureHigh: null,
        measureLong: null,
        measureWidth: null,
      },
      addRules: {
        name: [],
        allowableLoad: [],
      },
      editRow: {},
    };
  },

  mounted() {},
  created() {
    this.getCarModelsList();
  },
  mounted() {},
  methods: {
    // 获取车型信息列表
    async getCarModelsList() {
      const res = await getCarModelsList(this.carModelsForm);
      this.tableData = res.items;
      this.total = +res.counts;
    },
    //重置搜索表单
    resetSearch() {
      this.carModelsForm = this.resetSearchForm;
      this.getCarModelsList();
    },
    // 页码条数改变
    handleSizeChange(val) {
      //同步页码
      this.carModelsForm.pageSize = val;
      this.getCarModelsList();
    },
    handleCurrentChange(val) {
      //同步页码
      this.carModelsForm.page = val;
      this.getCarModelsList();
    },

    // 新增车型弹窗取消按钮
    btnCancel() {
      this.showDialog = false;
      //清空表单
      this.$refs.addForm.resetFields();
    },
    // 新增车型弹窗确认按钮
    async btnOk() {
      if (this.editRow.id) {
        await editTruckType(this.editRow);
        this.btnCancel();
        this.getCarModelsList();
      } else {
        this.addTruckType();
      }
    },
    // 新增车型
    async addTruckType() {
      await addTruckType(this.addForm);
      this.btnCancel();
      this.getCarModelsList();
    },
    // 删除车型
    async delTruckType(id) {
      await this.$confirm("此操作将永久删除该车型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await delTruckType(id);
      this.getCarModelsList();
    },
    // 编辑车型
    async editTruckType(row) {
      this.editRow = row;
      this.addForm = this.editRow;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
  margin: 0 auto;
  background-color: #f3f4f7;
}
.el-card_body {
  padding: 20px 0 0 0;
  background-color: #fff;
  .el-form {
    .el-row {
      flex-wrap: wrap;
      .btnbox {
        padding-left: 20px;
        .el-button {
          width: 90px;
        }
      }
    }
    .el-form-item {
      padding: 0 30px;
      .el-form-item__label {
        color: #20232a !important;
      }
    }
  }
}
.el-card_body2 {
  padding: 28px;
  margin-top: 20px;
  background-color: #ffffff;
  .el-table {
    margin-top: 20px;
    border: 1px solid #ebeef5;
  }
}
</style>
